/**
 * 帮助文档加载
 */
 import React, { Component } from 'react';
import { mdRender } from '../common/Common';

 import TDom from "../common/TDom";
 
 class TManualLoader extends Component{
  constructor(props){
    super(props);

    this.state={   
      baseUrl       : props.BaseUrl,
      manualUrl     : props.Index,     // 文档索引链接 JSON格式
      manualTitle   : "",              // 文档标题
      manualMenu    : [],              // 文档标题列表
      selectedIndex : -1,              // 选中标题索引
    }

    this.home             = this.home.bind(this);
    this.cancelArrowEvent = this.cancelArrowEvent.bind(this);
    this.handleKeyDown    = this.handleKeyDown.bind(this);
    this.handleMenuClick  = this.handleMenuClick.bind(this);

    this.viewHistroy  = [];
    this.divContent  = React.createRef();
  }
 
  componentDidMount(){
    this.loadBookFromJSON();

    document.onkeydown=this.cancelArrowEvent;
    window.addEventListener('keydown', this.handleKeyDown, false);
  }
 
  loadBookFromJSON(url){
    url = `${this.state.baseUrl}/${this.state.manualUrl}`;
  console.log(url)
    TDom.getDataFromUrl(url,(json)=>{
    
    const title   = json.title;
    const menu    = json.menu;
    const baseUrl = json.url;

    this.setState({
      manualTitle : title,
      manualMenu  : menu,
      baseUrl     : baseUrl,
      selectedIndex : 0,
    })

    this.viewHistroy.push(this.state);
    })
  }
 
  componentWillUnmount(){
    document.onkeydown = '';
    window.removeEventListener('keydown', this.handleKeyDown, false);
  }
 
   
  cancelArrowEvent(event){
    if(event.key === 'ArrowDown' || event.key === 'ArrowUp'){
      return false;
    }
  }
 
  handleKeyDown(event){
    if(event.key === 'ArrowDown'){
      let selected = this.state.selectedIndex;
      if(selected < this.state.manualMenu.length - 1){
        selected += 1;
        this.setState({
          selectedIndex : selected
        })
      }
    }
    else if(event.key === 'ArrowUp'){
      let selected = this.state.selectedIndex;
      if(selected > 0){
        selected -= 1;

        this.setState({
          selectedIndex : selected
        })
      }
    }
    else if( event.key === 'Enter'){
      this.updateManual();
    }
  }

  handleMenuClick(event){
    this.updateManual(event.target.id); 
  }
 
  updateManual(id){
    if(id === undefined) id = this.state.selectedIndex;

    const menu = this.state.manualMenu[id];

    this.viewHistroy.push(this.state);

    if(menu.menu){ 
      if(menu.menu[0].url) this.loadManual(menu.menu[0].url);

      this.setState({
        manualTitle    : menu.title,
        manualMenu     : menu.menu, 
        selectedIndex  : 0,
      })
    }else{
      this.loadManual(menu.url);
    } 

    this.setState({
      selectedIndex : id
    })
  }

  home(){
  if(this.viewHistroy.length > 0){
    const history = this.viewHistroy.pop();
    
    this.setState({
      manualTitle    : history.manualTitle,
      manualMenu     : history.manualMenu, 
      selectedIndex  : 0,
    });

    if(history.manualMenu[0].url)
      this.loadManual(history.manualMenu[0].url);
  }
  else{
    this.props.home();
  }    
  }
 
  loadManual(url){
  if(this.props.BaseUrl){
    url = `${this.props.BaseUrl}/${url}`;
  }

  TDom.getDataFromUrl(url, (md)=>{
    mdRender(md, this.divContent.current);
  })
  }
 
 
  _renderMenu(){
    const menu = this.state.manualMenu;
    const selected   = parseInt(this.state.selectedIndex);

    return menu.map((item, key)=>
      <button className={key===selected?'menu-selected':'menu'} 
        key={key} 
        id={key}
        onClick={this.handleMenuClick}>
      {item.title}</button>
    );
  }
 
 
  render(){
    return (
      <div className='book'>
        <div className='slider'>
          <button onClick={this.home}>返回</button>
          <b>{this.state.manualTitle}</b>
          {this._renderMenu()}
        </div>
        <div ref={this.divContent}></div>
      </div>
    );
  }
}
 
 export default TManualLoader;